<script setup lang="ts">
import {
    reqGetComments,
    reqSetComment,
    reqDelGood,
    reqSetGood,
} from "@/api/article";
import { CommetList } from "@/types/article";
import { Toast } from "vant";
import { ref } from "vue";
const props = defineProps({
    currentComment: Object,
    articleId: String,
});
const list = ref<CommetList>([]);
const loading = ref(false);
const finished = ref(false);
const offset = ref("");
const replyComment = ref("");
const onLoad = async () => {
    try {
        console.log(props.currentComment);
        const { data } = await reqGetComments(
            "c",
            props.currentComment!.com_id,
            offset.value
        );
        console.log(data);
        const arr = data.data.results;
        offset.value = data.data.last_id;
        list.value = [...list.value, ...arr];
        loading.value = false;
        if (arr.length === 0) {
            finished.value = true;
        }
    } catch (error) {
        console.log(error);
    }
};
const replyCommentFn = async () => {
    if (replyComment.value === "") return;
    const { data } = await reqSetComment(
        props.currentComment!.com_id,
        replyComment.value,
        props.articleId
    );
    console.log("评论成功的返回", data);
    console.log(data.data.new_obj);
    // 放本地视图的最上面
    list.value.unshift(data.data.new_obj);
    Toast.success("评论成功");
    replyComment.value = "";
    props.currentComment!.reply_count++;
    // onLoad();
};
// 切换点赞
const toggleCommentLike = async (comment: any) => {
    try {
        if (comment.is_liking) {
            // 是点赞状态,那就取消点赞
            await reqDelGood(comment.com_id);
            Toast.success("取消点赞");
        } else {
            // 是取消点赞的状态，那就是点赞
            await reqSetGood(comment.com_id);
            Toast.success("点赞成功");
        }
        // 数据反显
        comment.is_liking = !comment.is_liking;
    } catch (error) {
        console.log(error);
        Toast.fail("操作失败");
    }
};
</script>
<template>
    <div class="article-comments">
        <!-- 导航栏 -->
        <van-nav-bar :title="`${currentComment!.reply_count}条回复`">
            <van-icon @click="$emit('closeReply')" slot="left" name="cross" />
        </van-nav-bar>
        <!-- /导航栏 -->

        <!-- 当前评论 -->
        <van-cell>
            <van-image
                slot="icon"
                round
                width="30"
                height="30"
                style="margin-right: 10px"
                :src="currentComment!.aut_photo"
            />
            <span style="color: #466b9d" slot="title">{{
                currentComment!.aut_name
            }}</span>
            <div slot="label">
                <p style="color: #363636">{{ currentComment!.content }}</p>
                <p style="display: flex; justify-content: space-between">
                    <span style="margin-right: 10px">{{
                        currentComment!.pubdate
                    }}</span>
                    <van-icon
                        @click="toggleCommentLike(currentComment)"
                        slot="right-icon"
                        :name="currentComment!.is_liking ? 'like' : 'like-o'"
                    />
                </p>
            </div>
        </van-cell>
        <!-- /当前评论 -->
        <van-divider>全部回复</van-divider>

        <!-- 对当前评论 回复列表 -->
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <van-cell v-for="(item, index) in list" :key="index">
                <van-image
                    slot="icon"
                    round
                    width="30"
                    height="30"
                    style="margin-right: 10px"
                    :src="item.aut_photo"
                />
                <span style="color: #466b9d" slot="title">{{
                    item.aut_name
                }}</span>
                <div slot="label">
                    <p style="color: #363636">{{ item.content }}</p>
                    <p>
                        <span style="margin-right: 10px">{{
                            item.pubdate
                        }}</span>
                    </p>
                </div>
            </van-cell>
        </van-list>
        <!-- 回复列表 -->

        <!-- 发布回复 -->
        <van-cell-group class="publish-wrap">
            <van-field
                clearable
                v-model.trim="replyComment"
                placeholder="请输入评论内容"
                @keyup.enter="replyCommentFn"
            >
                <template #button>
                    <van-button
                        @click.stop="replyCommentFn"
                        size="mini"
                        type="primary"
                        >回复</van-button
                    >
                </template>
            </van-field>
        </van-cell-group>
        <!-- /发布回复 -->
    </div>
</template>

<style lang="scss" scoped>
// 发表评论的区域是固定在下端的
.publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}
// 给发表评论区空出地方
.van-list {
    margin-bottom: 45px;
}
</style>
